import React, { useState } from 'react';
import { Layout, Menu, ConfigProvider, theme, Avatar, Badge, Divider, Tooltip, Dropdown } from 'antd';
import type { MenuProps } from 'antd';
import { 
  AppstoreOutlined, 
  SettingOutlined,
  DatabaseOutlined,
  DashboardOutlined,
  FileTextOutlined,
  TeamOutlined,
  ApiOutlined,
  AuditOutlined,
  BookOutlined,
  UserOutlined,
  LogoutOutlined,
  MessageOutlined
} from '@ant-design/icons';
import { useThemeStore } from './stores/themeStore';
import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from 'react-router-dom';

// 导入组件
import Dashboard from './pages/Dashboard';
import DocumentLibrary from './components/DocumentLibrary/DocumentLibrary';
import ModelSwitchPanel from './components/ModelHub/ModelSwitchPanel';
import AuditLogViewer from './components/AuditLogs/AuditLogViewer';
import PermissionManager from './components/TeamManagement/PermissionManager';
import PluginManager from './plugins/PluginManager';
import ChatInterface from './components/ChatInterface/ChatInterface';
import SystemSettings from './components/Settings/SystemSettings';
import UserProfile from './components/User/UserProfile';
import NotFoundPage from './components/common/NotFoundPage';
import LoginPage from './pages/LoginPage';
import RetrievalTester from './components/RetrievalTester/RetrievalTester';
import Notifications from './components/Notifications/Notifications';

const { Header, Sider, Content, Footer } = Layout;
const { SubMenu } = Menu;

interface MenuItem {
  key: string;
  icon: React.ReactNode;
  label: string;
  path?: string;
  children?: MenuItem[];
}

const AppContent: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const { isDarkMode, primaryColor } = useThemeStore();
  const navigate = useNavigate();
  
  // 菜单项配置
  const menuItems: MenuItem[] = [
    {
      key: 'dashboard',
      icon: <DashboardOutlined />,
      label: '概览',
      path: '/'
    },
    {
      key: 'documents',
      icon: <FileTextOutlined />,
      label: '文档库',
      path: '/documents'
    },
    {
      key: 'chat',
      icon: <MessageOutlined />,
      label: 'AI对话',
      path: '/chat'
    },
    {
      key: 'model-hub',
      icon: <BookOutlined />,
      label: '模型中心',
      path: '/model-hub'
    },
    {
      key: 'retrieval',
      icon: <AuditOutlined />,
      label: '检索测试',
      path: '/retrieval'
    },
    {
      key: 'management',
      icon: <SettingOutlined />,
      label: '系统管理',
      children: [
        {
          key: 'team',
          icon: <TeamOutlined />,
          label: '团队管理',
          path: '/team'
        },
        {
          key: 'plugins',
          icon: <AppstoreOutlined />,
          label: '插件管理',
          path: '/plugins'
        },
        {
          key: 'settings',
          icon: <SettingOutlined />,
          label: '系统设置',
          path: '/settings'
        },
        {
          key: 'audit-logs',
          icon: <AuditOutlined />,
          label: '审计日志',
          path: '/audit-logs'
        }
      ]
    }
  ];
  
  // 渲染菜单项
  const renderMenuItems = (items: MenuItem[]) => {
    return items.map(item => {
      if (item.children) {
        return (
          <SubMenu key={item.key} icon={item.icon} title={item.label}>
            {renderMenuItems(item.children)}
          </SubMenu>
        );
      } else {
        return (
          <Menu.Item key={item.key} icon={item.icon}>
            <Link to={item.path || '/'}>{item.label}</Link>
          </Menu.Item>
        );
      }
    });
  };
  
  // 用户下拉菜单项
  const userMenuItems: MenuProps['items'] = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人中心',
      onClick: () => navigate('/profile')
    },
    {
      key: 'settings',
      icon: <SettingOutlined />,
      label: '设置',
      onClick: () => navigate('/settings')
    },
    {
      key: 'divider',
      label: <Divider style={{ margin: '4px 0' }} />,
      disabled: true
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: () => {
        // 执行登出操作
        console.log('登出操作');
        navigate('/login');
      }
    }
  ];
  
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider 
        collapsible 
        collapsed={collapsed} 
        onCollapse={value => setCollapsed(value)}
        theme={isDarkMode ? 'dark' : 'light'}
      >
        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.2)' }} />
        <Menu
          mode="inline"
          defaultSelectedKeys={['dashboard']}
          theme={isDarkMode ? 'dark' : 'light'}
        >
          {renderMenuItems(menuItems)}
        </Menu>
      </Sider>
      <Layout>
        <Header style={{ 
          padding: '0 16px', 
          background: isDarkMode ? '#141414' : '#fff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        }}>
          <div style={{ fontSize: 18, fontWeight: 'bold', color: isDarkMode ? '#fff' : 'inherit' }}>
            企业知识库管理平台
          </div>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <Notifications />
            <Divider type="vertical" />
            <Dropdown menu={{ items: userMenuItems }}>
              <div style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
                <Avatar icon={<UserOutlined />} />
                <span style={{ marginLeft: 8, color: isDarkMode ? '#fff' : 'inherit' }}>Admin</span>
              </div>
            </Dropdown>
          </div>
        </Header>
        <Content style={{ margin: '16px', padding: 24, background: isDarkMode ? '#141414' : '#fff' }}>
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/documents" element={<DocumentLibrary />} />
            <Route path="/model-hub" element={<ModelSwitchPanel />} />
            <Route path="/retrieval" element={<RetrievalTester />} />
            <Route path="/team" element={<PermissionManager />} />
            <Route path="/plugins" element={<PluginManager />} />
            <Route path="/settings" element={<SystemSettings />} />
            <Route path="/audit-logs" element={<AuditLogViewer />} />
            <Route path="/chat" element={<ChatInterface />} />
            <Route path="/profile" element={<UserProfile />} />
            <Route path="/login" element={<LoginPage />} />
            <Route path="*" element={<NotFoundPage />} />
          </Routes>
        </Content>
        <Footer style={{ textAlign: 'center', background: isDarkMode ? '#1f1f1f' : '#f0f2f5', color: isDarkMode ? 'rgba(255, 255, 255, 0.65)' : 'rgba(0, 0, 0, 0.45)' }}>
          企业知识库管理平台 ©{new Date().getFullYear()} 版权所有
        </Footer>
      </Layout>
    </Layout>
  );
};

const App: React.FC = () => {
  const { isDarkMode, primaryColor } = useThemeStore();
  
  // 主题配置
  const themeConfig = {
    algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
    token: {
      colorPrimary: primaryColor,
    },
  };

  return (
    <ConfigProvider theme={themeConfig}>
      <Router>
        <AppContent />
      </Router>
    </ConfigProvider>
  );
};

export default App; 